<template>
  <div class="container">
    <div class="header flex-row">
      <div class="header-logo" @click="toIndex">
        <img class="header-logo-img" src="@/assets/images/v2/logo.png" alt />
        <span class="header-logo-desc">实战方案获取工具</span>
      </div>

      <div class="outer1">
        <div class="mod1 flex-row">
          <div class="box2 flex-col">
            <div class="mod2">
              <span class="word1" v-html="report.name"></span>
            </div>
            <div class="mod3 flex-row">
              <img
                v-show="report.name"
                class="label33"
                referrerpolicy="no-referrer"
                src="@/assets/images/date.png"
              />
              <span class="word3">{{ report.timeText }}</span>

              <img
                v-show="report.name"
                class="label3"
                referrerpolicy="no-referrer"
                src="@/assets/images/page.png"
              />
              <span class="txt3" v-show="report.name"
                >{{ report.page_count }}页</span
              >
            </div>
          </div>
          <div class="box3 flex-col" v-show="report.name">
            <div
              class="box4 flex-row"
              @click="download"
              style="cursor: pointer"
            >
              <span class="word5">下载</span>
              <img
                class="label4"
                referrerpolicy="no-referrer"
                src="@/assets/images/pdf-icon.png"
              />
            </div>
          </div>
          <div
            class="box5 flex-col"
            :class="report.is_favorite ? 'collected' : 'uncollect'"
            v-show="report.name"
            style="margin-left: 20px; width: 100px"
          >
            <div
              class="box6 flex-row"
              @click="collect"
              style="cursor: pointer; width: 80%"
            >
              <span
                class="word7"
                style="align-self: center; width: 100%; text-align: center"
              >
                {{ report.is_favorite ? "已收藏" : "添加到收藏" }}</span
              >
            </div>
          </div>
        </div>
      </div>

      <div class="header-user">
        <div class="header-user-btn" v-if="!token">
          <div class="header-user-btn-login" @click="loginVisible = true">
            登录
          </div>
          <div class="header-user-btn-register" @click="loginVisible = true">
            注册
          </div>
        </div>
        <div class="customer" v-if="token">
          <div
            @click="toVip"
            class="flex justify-content-center align-items-center"
          >
            <img
              style="width: 16px; height: 16px; padding-bottom: 3px"
              src="@/assets/images/vip.png"
              v-if="vip_last_day > 0"
              alt
            />
            <div
              class="customer-noneVip"
              :class="[vip_last_day > 0 ? 'activeRed' : 'activeGray']"
              style="cursor: pointer"
            >
              {{ vip_last_day > 0 ? "年度会员" : "未开通会员" }}
            </div>
          </div>
          <el-dropdown>
            <div class="flex justify-content-center align-items-center">
              <div class="customer-name">{{ name }}</div>
              <div class="customer-avatar">
                <el-avatar :size="32" :src="avatar"></el-avatar>
              </div>
              <i
                class="el-icon-arrow-down customer-arrow-down"
                style="color: #3f4750"
              ></i>
            </div>
            <el-dropdown-menu slot="dropdown" style="width: 220px">
              <el-dropdown-item>
                <div class="action-list">
                  <div>用户id：{{ uid }}</div>
                </div>
              </el-dropdown-item>

              <el-dropdown-item>
                <div class="action-list">
                  <img
                    class="action-list-icon"
                    src="@/assets/images/icon-share.png"
                  />
                  <div
                    style="
                      display: flex;
                      justify-content: space-between;
                      width: 300px;
                    "
                  >
                    <div>剩余茶叶：{{ balance }}</div>
                    <div
                      slot="reference"
                      style="color: #388ae9"
                      @click="charge"
                    >
                      充值
                    </div>
                  </div>
                </div>
              </el-dropdown-item>

              <el-dropdown-item>
                <div class="action-list" @click="toMyCollection">
                  <img
                    class="action-list-icon"
                    src="@/assets/images/star-icon.png"
                  />
                  <div>我的收藏</div>
                </div>
              </el-dropdown-item>
              <el-dropdown-item>
                <div class="action-list" @click="toMyRecord">
                  <img
                    class="action-list-icon"
                    src="@/assets/images/record.png"
                  />
                  <div>浏览历史</div>
                </div>
              </el-dropdown-item>
              <!-- <el-dropdown-item>
              <div class="action-list" @click="toInviteList">
                <img class="action-list-icon" src="@/assets/images/icon-share.png" />
                <div>邀请记录</div>
              </div>
            </el-dropdown-item> -->
              <el-dropdown-item divided>
                <div class="action-list" @click="loginOut">
                  <img
                    class="action-list-icon"
                    src="@/assets/images/logout-icon.png"
                  />
                  <div>退出登录</div>
                </div>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>
      <el-dialog
        :visible.sync="loginVisible"
        width="500px"
        :modal="true"
        append-to-body
        :close-on-click-modal="false"
        :show-close="false"
      >
        <el-radio-group
          v-model="tabActive"
          style="width: 100%"
          class="radio-group"
        >
          <el-radio-button
            @click="clickLoginBtn"
            label="first"
            style="width: 100%"
            >二维码登录/注册</el-radio-button
          >
        </el-radio-group>
        <login-qrcode
          v-if="tabActive == 'first' && loginVisible"
          v-on:loginsucc="loginSubmit"
          :keepcount="loginVisible"
        ></login-qrcode>
      </el-dialog>

      <payform
        style="z-index: 9999"
        v-if="centerDialogVisible"
        @closePayDialog="closeDialog"
        :description="'开通vip，解锁免费下载功能'"
        :showCloseButton="true"
        :mtips="'您的下载次数已达上限~'"
      ></payform>
    </div>
  </div>
</template>

<script>
import { getDetail, collect } from "@/api/report.js";
import request from "@/utils/request";
import LoginQrCodeComp from "@/components/LoginQrCodeComp";
import LoginPhoneComp from "@/components/LoginPhoneComp";
import { mapGetters } from "vuex";
import { formatDate } from "@/utils/index.js";
import eventBus from "@/utils/eventBus.js";
import LoginPasswordComp from "@/components/LoginPasswordComp";
import payform from "@/components/payform.vue";

import { sendSms, phoneBind } from "@/api/login";
import WxmpRsa from "wxmp-rsa";
const rsa = new WxmpRsa();
export default {
  data() {
    return {
      centerDialogVisible: false,
      randomAdImg: null,
      showAdVip: false,
      loginPhoneVisible: false,
      loginVisible: false,
      phoneVisible: false,
      loginPhoneMode: 1,
      tabActive: "first",
      circleUrl: "",
      phoneForm: {
        phone: "",
        pwd: "",
        code: "",
      },
      codeText: "获取验证码",
      codeCount: 60,
      codeInterval: null,
      report: {},
      fid: "",
      isRecommend: false,
    };
  },
  components: {
    payform,
    "login-qrcode": LoginQrCodeComp,
    "login-phone": LoginPhoneComp,
    "login-pass": LoginPasswordComp,
  },
  created() {
    this.$store.dispatch("GetInfo");
    // 定义私钥
    const { Base64 } = require("js-base64");
    // // 设置私钥
    // rsa.setPrivateKey(Base64.decode(myKey));
    //初始化页面的时候，加载知乎统计代码
    var query = this.$route.query;
    console.log(query);

    let password = Base64.decode(query.fid);
    let fid = password;
    this.fid = password;

    getDetail(fid).then((res) => {
      eventBus.$emit("getDetail", res); //发送到详情页面
      console.log(res);
      var time = res.data.detail.create_time * 1000;
      let date = new Date(time);
      this.report = res.data.detail;
      this.report.timeText = formatDate(date, "yyyy-MM-dd hh:mm");
      if (this.report.parent_id == "e5523e943dedafdeebc00bb2fe1552f2") {
        this.isRecommend = true;
      }
    });

    setTimeout(() => {
      console.log("sid:", this.sid);
      if (!this.sid) {
        this.$store.commit("SET_SHOW", true);
        return;
      }
    }, 300);
  },
  computed: {
    ...mapGetters([
      "sid",
      "uid",
      "token",
      "name",
      "avatar",
      "showLogin",
      "unlock_chart",
      "user_type",
      "is_vip",
      "vCount",
      "vip_last_day",
      "balance",
    ]),
    // loginVisible: {
    //   get() {
    //     return this.showLogin;
    //   },
    //   set(value) {
    //     this.$store.commit("SET_SHOW", value);
    //     this.loginPhoneMode = 1;
    //   },
    // },
  },
  methods: {
    clickLoginBtn() {
      // this.$store.dispatch("Login", {
      //   token: 'b6a3ed40a18b99672d335ccb3d6790ee',
      //   // sid: res.infor.sid,
      //   // openid: res.infor.openid
      // });
      // console.log('login')
      // this.$emit("loginsucc", 1);
    },
    closeDialog() {
      this.centerDialogVisible = false;
      //      console.log("  this.centerDialogVisible"+  this.centerDialogVisible)
    },
    openUrl() {
      if (this.user_type == 1) {
        this.showAdVip = true;
        return;
      }
      var href = this.report.online_url;
      window.open(href, "_blank");
    },
    loginSubmit(binedPhone) {
      //知乎统计扫码登录
      this.zhihuLoginPushCode();
      this.loginVisible = false;
      this.$store.dispatch("GetInfo");
      window.location.reload();
    },
    toReport() {
      this.$router.push({
        path: "/report",
      });
    },
    toDataChat() {
      this.$router.push({
        path: "/chart",
      });
    },
    toGroup() {
      if (this.sid) {
        this.$router.push({
          path: "/group/index",
        });
      } else {
        this.loginVisible = true;
      }
    },
    inGroup() {
      return this.$route.path.includes("/group");
    },
    loginOut() {
      this.$store.dispatch("LogOut");
    },
    toMyRecord() {
      this.$router.push({
        path: "/myRecord",
      });
    },
    getPhoneVerifyCode() {
      // 发送请求
      if (this.codeText != "获取验证码") {
        return;
      }
      // 发送请求
      this.codeInterval = setInterval(() => {
        this.codeText = this.codeCount--;
        if (this.codeText == 0) {
          clearInterval(this.codeInterval);
          this.codeInterval = null;
          this.codeText = "获取验证码";
          this.codeCount = 60;
        }
      }, 1000);
      sendSms(this.phoneForm.phone).then((res) => {
        this.$message.info("验证码已发送, 有效时间5分钟");
      });
    },
    onFinish() {
      phoneBind(this.phoneForm).then((res) => {
        this.phoneVisible = false;
        this.$message.success("绑定成功");
      });
    },
    toVip() {
      let { href } = this.$router.resolve({
        path: "/aboutVip",
      });
      window.open(href, "_blank");
    },
    toMyUpload() {
      this.$router.push({
        path: "/myUpload",
      });
    },
    toInviteList() {
      this.$router.push({
        path: "/inviteList",
      });
    },
    toMyCollection() {
      this.$router.push({
        path: "/myCollection",
      });
    },
    toIndex() {
      this.$router.push({
        path: "/",
      });
    },
    // browseFile() {
    //   let subParams = {
    //     sid: this.sid,
    //     op_type: "1",
    //     fid: this.report.id,
    //     op_from: "1",
    //   };
    //   //      console.log(" ----------browseFile");
    //   recordFile(subParams).then((res) => {
    //     //      console.log(res);
    //   });
    // },
    // addFile(opType) {
    //   //opType,操作类型, 1: 浏览, 2:下载
    //   let subParams = {
    //     sid: this.sid,
    //     op_type: opType,
    //     fid: this.report.id,
    //     op_from: "1",
    //   };
    //   //      console.log(" ----------recordFile");
    //   recordFile(subParams).then((res) => {
    //     //      console.log(res);
    //   });
    // },
    charge() {
      this.$router.push({
        path: "/aboutVip",
      });
    },

    download() {
      let that = this;
      var url = this.report.online_url;
      console.log("下载地址:", url);
      request({
        url: url, //后台下载信息的请求链接
        method: "GET",
        responseType: "arraybuffer",
      }).then((response) => {
        var blob = new Blob([response], {
          type:
            that.report.file_type == 1
              ? "application/pdf;charset=utf-8"
              : "application/ppt;charset=utf-8",
        });
        var downloadElement = document.createElement("a");
        var href = window.URL.createObjectURL(blob); // 创建下载的链接
        downloadElement.href = href;
        var name = that.report.name
          .replace("<mark>", "")
          .replace("</mark>", "");
        name = name.replace("<mark>", "").replace("</mark>", "");
        name = name.replace("<mark>", "").replace("</mark>", "");
        name = name.replace("<mark>", "").replace("</mark>", "");
        name = name.replace("<mark>", "").replace("</mark>", "");
        downloadElement.download = name; // 下载后文件名
        document.body.appendChild(downloadElement);
        downloadElement.click(); // 点击下载
        document.body.removeChild(downloadElement); // 下载完成移除元素
        window.URL.revokeObjectURL(href); // 释放掉blob对象
      });
    },

    collect() {
      let report = this.report;
      console.log(report);
      let data = {
        id: report.id,
      };
      collect(data).then((res) => {
        console.log(res);
        if (res.code == 0) {
          this.report.is_favorite = 1 - this.report.is_favorite;
          if (this.report.is_favorite) {
            this.$message.success("收藏成功");
          } else {
            this.$message.success("取消收藏成功");
          }
        }
      });
    },
    //知乎统计代码(首页访问)
    zhihuLoginStatistics() {},
    //知乎统计--登录转化代码
    zhihuLoginPushCode() {
      window.zhad.push({ eventtype: "js_view" });
    },
  },
};
</script>

<style scoped lang="less">
.radio-group {
  /deep/ .el-radio-button__inner {
    width: 100%;
  }
}
.mini {
  margin: 10px;
  .mini-qrcode {
    width: 148px;
    height: 148px;
    img {
      width: 100%;
      height: 100%;
      display: block;
    }
  }

  .mini-header {
    font-size: 16px;
    color: #8e969d;
    margin-bottom: 4px;
    text-align: center;
  }
}
.container {
  height: 54px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
}

.header {
  max-width: 1300px;
  width: 100%;
  height: 54px;
  background: white;
  overflow: hidden;
  position: fixed;
  z-index: 1000;
  &-logo {
    left: 0;
    top: 0;
    color: #fff;
    padding: 12px 0;
    padding-left: 20px;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    cursor: pointer;
    &-img {
      width: 140px;
      height: 24px;
      display: block;
    }
    &-title {
      margin: 0 8px;
      font-size: 20px;
      font-weight: 600;
    }
    &-desc {
      margin-left: 8px;
      margin-top: 7px;
      font-family: SourceHanSansCN, SourceHanSansCN;
      font-weight: 400;
      font-size: 12px;
      color: #3f4750;
    }
  }
  &-menu {
    width: 620px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    &-item {
      display: flex;
      justify-content: center;
      align-items: center;
      flex: 1;
      cursor: pointer;
      &-icon {
        width: 24px;
        height: 24px;
        display: block;
        margin-right: 4px;
      }
      &-text {
        font-size: 16px;
        color: @menu-text-color;
      }
    }
    .active {
      background: @menu-active-color;
    }
    // .mini-qrcode-hover:hover{
    //     background: @menu-active-color;
    // }
  }
  &-user {
    height: 100%;
    right: 0;
    top: 0;
    &-btn {
      padding-right: 20px;
      height: 100%;
      font-size: 13px;
      display: flex;
      justify-content: center;
      align-items: center;
      &-login {
        width: 80px;
        height: 32px;
        background: #3373d4;
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 14px;
        color: #ffffff;
        margin-right: 8px;
        cursor: pointer;
      }
      &-register {
        width: 80px;
        height: 32px;
        border-radius: 16px;
        border: 1px solid #3373d4;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #3373d4;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 14px;
        color: #3373d4;
        cursor: pointer;
      }
    }
    .customer {
      display: flex;
      align-items: center;
      height: 100%;
      &-noneVip {
        font-size: 12px;
        margin: 0 8px 0 4px;
      }
      &-name {
        font-size: 16px;
        color: #3f4750;
      }
      &-avatar {
        margin: 0 8px 0 8px;
      }
      &-arrow-down {
        margin-right: 14px;
      }
    }
  }
}
.action-list {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 13px;
  color: #3f4750;
  &-icon {
    width: 24px;
    height: 24px;
    display: block;
    margin-right: 8px;
  }
}

.outer1 {
  z-index: 2;
  height: 72px;
  justify-content: center;
  margin: 0 auto;
  align-items: center;
  .mod1 {
    z-index: auto;
    height: 48px;
    .icon1 {
      z-index: 5;
      width: 28px;
      height: 28px;
      margin-top: 10px;
    }
    .txt1 {
      z-index: 4;
      width: 100px;
      display: block;
      overflow-wrap: break-word;
      color: #3f4750;
      font-size: 20px;
      font-family: Helvetica;
      white-space: nowrap;
      line-height: 20px;
      text-align: left;
      margin: 15px 0 0 8px;
    }
    .info1 {
      z-index: 3;
      width: 84px;
      display: block;
      overflow-wrap: break-word;
      color: #3f4750;
      font-size: 12px;
      white-space: nowrap;
      line-height: 12px;
      text-align: left;
      margin: 23px 0 0 8px;
    }
    .box1 {
      z-index: 31;
      height: 48px;
      border-width: 1px;
      border: 1px solid rgba(251, 122, 132, 1);
      background-color: rgba(255, 214, 217, 1);
      width: 96px;
      justify-content: center;
      align-items: center;
      .info2 {
        z-index: 32;
        width: 56px;
        display: block;
        overflow-wrap: break-word;
        color: rgba(63, 71, 80, 1);
        font-size: 13px;
        white-space: nowrap;
        line-height: 20px;
        text-align: left;
      }
    }
    .box2 {
      z-index: auto;
      height: 48px;
      margin-left: 8px;
      .mod2 {
        z-index: 30;
        width: 450px;
        height: 24px;
        overflow-wrap: break-word;
        text-align: left;
        white-space: nowrap;
        font-size: 0;
        .word1 {
          display: block;
          width: 500px;
          font-size: 15px;
          color: #3f4750;
          line-height: 24px;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .word2 {
          font-size: 17px;
          color: rgba(255, 85, 98, 1);
          line-height: 24px;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .info3 {
          font-size: 17px;
          color: rgba(255, 255, 255, 1);
          line-height: 24px;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
      .mod3 {
        z-index: auto;
        height: 20px;
        margin-top: 4px;
        .label1 {
          z-index: 41;
          width: 20px;
          height: 20px;
        }
        .word3 {
          z-index: 33;
          display: block;
          overflow-wrap: break-word;
          color: rgba(203, 208, 213, 1);
          font-size: 13px;
          white-space: nowrap;
          line-height: 20px;
          text-align: left;
          margin-left: 2px;
        }
        .icon2 {
          z-index: 53;
          width: 20px;
          height: 20px;
          margin-left: 20px;
        }
        .word4 {
          z-index: 36;
          display: block;
          overflow-wrap: break-word;
          color: rgba(203, 208, 213, 1);
          font-size: 13px;
          white-space: nowrap;
          line-height: 20px;
          text-align: left;
          margin-left: 2px;
        }
        .label2 {
          z-index: 98;
          width: 20px;
          height: 20px;
          margin-left: 20px;
        }
        .txt2 {
          z-index: 39;
          display: block;
          overflow-wrap: break-word;
          color: rgba(203, 208, 213, 1);
          font-size: 13px;
          white-space: nowrap;
          line-height: 20px;
          text-align: left;
          margin-left: 2px;
        }
        .label3 {
          z-index: 104;
          width: 16px;
          height: 16px;
          margin-left: 20px;
        }
        .label33 {
          z-index: 104;
          width: 16px;
          height: 16px;
        }
        .txt3 {
          z-index: 40;
          display: block;
          overflow-wrap: break-word;
          color: rgba(203, 208, 213, 1);
          font-size: 13px;
          white-space: nowrap;
          line-height: 20px;
          text-align: left;
          margin-left: 2px;
        }
      }
    }
    .box3 {
      z-index: 139;
      height: 40px;
      border-radius: 20px;
      background: #467dd0;
      width: 90px;
      justify-content: center;
      align-items: flex-start;
      padding-left: 16px;
      margin: 7px 0 0 74px;
      .box4 {
        z-index: auto;
        width: 56px;
        height: 24px;
        justify-content: space-between;
        .word5 {
          z-index: 142;
          width: 28px;
          display: block;
          overflow-wrap: break-word;
          color: white;
          font-size: 13px;
          font-family: PingFangSC-Medium;
          white-space: nowrap;
          line-height: 20px;
          text-align: right;
          margin-top: 2px;
        }
        .icon3 {
          z-index: 141;
          width: 18px;
          height: 24px;
        }
        .label4 {
          z-index: 140;
          width: 24px;
          height: 24px;
        }
      }
    }
    .box5 {
      z-index: 139;
      height: 40px;
      border-radius: 20px;
      width: 90px;
      justify-content: center;
      align-items: flex-start;
      padding-left: 16px;
      margin: 7px 0 0 7px;
      .box6 {
        z-index: auto;
        width: 56px;
        height: 24px;
        justify-content: space-between;
        .word7 {
          z-index: 142;
          width: 28px;
          display: block;
          overflow-wrap: break-word;
          font-size: 13px;
          font-family: PingFangSC-Medium;
          white-space: nowrap;
          line-height: 20px;
          text-align: left;
          margin-top: 2px;
        }
        .icon3 {
          z-index: 141;
          width: 18px;
          height: 24px;
        }
        .label4 {
          z-index: 140;
          width: 24px;
          height: 24px;
        }
      }
    }
  }
}

.collected {
  background: white;
  color: #467dd0;
}

.uncollect {
  background: linear-gradient(90deg, #ef9d62, #e36f3f);
  color: white;
}

.flex-col {
  display: flex;
  flex-direction: column;
}
.flex-row {
  display: flex;
  flex-direction: row;
}
mark {
  color: red;
}

._1i2TTQ1Tkjd8aq9GZkhYea,
._8StXgXkVcxh1QjZRZ9Ds_ {
  display: flex;
  align-items: center;
  width: 92px;
  height: 36px;
  font-size: 12px;
  cursor: pointer;
  border-radius: 17px;
  border: none;
}

.orange {
  background: linear-gradient(90deg, #ef9d62, #e36f3f);
  color: #fff;
  cursor: pointer;
  border-radius: 17px;
  border: none;
  align-items: center;
  font-size: 14px;
  z-index: 139;
  height: 40px;
  border-radius: 20px;
  width: 90px;
  justify-content: center;
  align-items: flex-start;
  margin: 7px 0 0 10px;
  white-space: normal;
}
.ant-btn,
.ant-btn:active,
.ant-btn:focus {
  outline: 0;
}
.ant-btn {
  line-height: 1.5715;
  position: relative;
  display: inline-block;
  font-weight: 400;
  white-space: nowrap;
  text-align: center;
  background-image: none;
  box-shadow: 0 2px 0 rgb(0 0 0 / 2%);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  user-select: none;
  touch-action: manipulation;
  height: 32px;
  padding: 4px 15px;
  font-size: 14px;
  border-radius: 2px;
  color: rgba(0, 0, 0, 0.85);
  border: 1px solid #d9d9d9;
  background: #fff;
}
.activeRed {
  color: rgb(250, 132, 52);
}
.activeGray {
  color: #8e969d;
}

.ad5s {
  height: 100%;
  top: 465px;
  right: 50%;
  position: fixed;
  overflow: hidden;
  max-height: 560px;
  transition: all 0.4s;
  z-index: 999;
  transform: translate(50%, -50%);
}
em {
  color: #e46343;
}

em,
i {
  font-style: normal;
}
._1qCV0ZWvbpcM-1tIaZZXes {
  top: 0;
  right: 0;
  z-index: 1;
  opacity: 0.8;
  color: #fff;
  line-height: 20px;
  font-size: 14px;
  cursor: pointer;
  padding: 5px 10px;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.5);
  outline: none;
}

.vip_goto {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  cursor: pointer;
  position: absolute;
}

.img_close {
  cursor: pointer;
  color: #fff;
  opacity: 0.8;
  box-sizing: content-box;
  border-radius: 14px;
  background-color: #666;
  height: 100%;
  top: 25px;
  right: 3%;
  position: fixed;
  overflow: hidden;
  max-height: 560px;
  transition: all 0.4s;
  z-index: 999;
  transform: translate(50%, -50%);
}
</style>
